<template>
  <div class="core-technology-page">
    <!-- 复用导航栏组件 -->
    <HeaderNav />
    
    <!-- 页面标题区 -->
    <section class="page-banner">
      <div class="banner-content">
        <h1 class="page-title">{{ $t('coreTech.pageTitle') }}</h1>
        <div class="page-breadcrumb">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item><router-link to="/">{{ $t('common.home') }}</router-link></el-breadcrumb-item>
            <el-breadcrumb-item>{{ $t('coreTech.pageTitle') }}</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </div>
    </section>
    
    <!-- 主内容区 - 空结构占位 -->
    <main class="main-content">
      <div class="container">
        <div class="placeholder-content">
          <div class="placeholder-icon">
            <i class="iconfont icon-construction"></i>
          </div>
          <h2 class="placeholder-title">{{ $t('coreTech.underConstruction') }}</h2>
          <p class="placeholder-desc">{{ $t('coreTech.comingSoon') }}</p>
          <el-button type="primary" class="back-btn" @click="$router.push('/')">
            {{ $t('coreTech.backToHome') }}
            <i class="iconfont icon-home"></i>
          </el-button>
        </div>
      </div>
    </main>
    
    <!-- 页脚 -->
    <Footer />
  </div>
</template>

<script setup>
import HeaderNav from '@/components/layout/HeaderNav.vue'
import Footer from '@/components/layout/Footer.vue'
</script>

<style scoped lang="scss">
.core-technology-page {
  // 页面标题区
  .page-banner {
    background: linear-gradient(135deg, #0A2463 0%, #3E92CC 100%);
    padding: 80px 0;
    text-align: center;
    color: white;
    
    .banner-content {
      .page-title {
        font-size: 2.5rem;
        margin-bottom: 15px;
        font-weight: 700;
      }
      
      .page-breadcrumb {
        .el-breadcrumb {
          .el-breadcrumb__item {
            .el-breadcrumb__inner {
              color: rgba(255, 255, 255, 0.8);
              
              &.is-link {
                &:hover {
                  color: #ffffff;
                }
              }
            }
            
            .el-breadcrumb__separator {
              color: rgba(255, 255, 255, 0.5);
              margin: 0 8px;
            }
          }
        }
      }
    }
    
    @media (max-width: 768px) {
      padding: 60px 0;
      
      .banner-content {
        .page-title {
          font-size: 2rem;
        }
      }
    }
  }
  
  // 主内容区 - 占位内容
  .main-content {
    padding: 100px 0;
    min-height: 400px;
    
    .placeholder-content {
      text-align: center;
      max-width: 600px;
      margin: 0 auto;
      
      .placeholder-icon {
        font-size: 80px;
        color: #e0e0e0;
        margin-bottom: 30px;
      }
      
      .placeholder-title {
        font-size: 2rem;
        color: #333;
        margin-bottom: 15px;
      }
      
      .placeholder-desc {
        color: #666;
        font-size: 1.1rem;
        margin-bottom: 40px;
        line-height: 1.6;
      }
      
      .back-btn {
        padding: 12px 30px;
        background-color: #D8315B;
        border-color: #D8315B;
        
        &:hover {
          background-color: #b92a4c;
          border-color: #b92a4c;
        }
        
        .iconfont {
          margin-left: 8px;
        }
      }
    }
  }
}
</style>